Task Progress Tracker

Progress: 0%

I found the "progress" tag through W3 Schools here

This HTML element creates a dynamic progress bar that when combined with some simple JavaScript can display progress or completion!

For the new JS elements, I used math.Round(), the getElementByID() method, and the new addEventListner() method.

I found math.Round() by my own guess, as the syntax between Java (I code frequently in Java for game development) and JS are very similar.

I found the "getElementByID()" method through mozilla developer here

This method allows interaction between HTML and JS. HTML elements such as buttons, drop-down menus, and text entries rely on this method. The method is passed in the id of the element (In this case "startTracker") which then allows the element to be monitored (as used by the button) or altered (as done with the progress text underneath the bar!

I found the "addEventListener()" method through mozilla developer here

As a follow up to the "getElementByID" method, this method is how HTML elements are monitored. Using this method, JS can track keystrokes, clicks, mouse-hovers, and other user interactions with HTML pages to track back to java. It's through this method that the code begins. Only when the "startTracker" button is clicked does the method start, beginning the chain of alerts/pop ups that allow the progress bar to work.

Finally, here's what I found for the new CSS elements:

I found the "transition" style through W3 Schools here

The "transition" style is used to help transition property values smootly over a given duration. It can be used to transition changes in a number of elements, such as the Progress element in this case. When a change is triggered by JS, the transition style kicks in, creating a smooth transition in the progress bar rather than a sudden jump!

I found the ":root" tag through mozilla developer here

The ":root" tag allows for the use of variables in CSS. I wanted this specific color because it works nicely with buttons, and pairs well with the matching yellow/red colors. Rather than having to copy-paste the color's hex code (which in retrospect might've been easier), I simply got to use variables named --mainColor and --accentColor to keep track of the green and yellow used for links and the button.